<!-- src/components/XtxPagination.vue -->
<script setup lang="ts">
//接收外部参数
const props = defineProps<{
  page: number;
  pages: number;
  maxVisiblePages: number;
}>();
const emit = defineEmits(["update:page"]);
const page = useVModel(props, "page", emit);
//当前页码数

//页面中同时最多要展示的代码数
const maxVisiblePageNum = ref(props.maxVisiblePages);
//总页数
const pages = ref(props.pages);
const pageInfo = computed(() => {
  //计算页码的偏移量，偏移量是指当前页的两边有多少页码
  const pageOffset = Math.floor(maxVisiblePageNum.value / 2);
  //计算显示着的开始页码: 当前页-页码偏移量
  let start = page.value - pageOffset;
  //计算显示着的结束页码：显示着的开始页码+页面中同时显示着的做多页码·1
  //页面中最冬显示6个页码
  //页码的信移量6/2：3
  //当前页是5
  //start:5-3:2
  //ende2+6-1:7
  let end = start + maxVisiblePageNum.value - 1;
  //限制开始页码的范围
  if (start < 1) {
    //重置开始页码
    start = 1;
    //重新计算显示的结束页码
    let end_tmp = start + maxVisiblePageNum.value - 1;
    //判断重新计算的显示着的结束页码是否大于总页数，如果大于总页数让它等于总页数，否则让他等于重新计算的结束页码
    end = end_tmp > pages.value ? pages.value : end_tmp;
  }
  //限制显示着的结束页码的范围
  if (end > pages.value) {
    //重置显示结束页码
    end = pages.value;
    //重新计算开始页码
    let start_tmp = end - maxVisiblePageNum.value + 1;
    //限制开始页码
    start = start_tmp < 1 ? 1 : start_tmp;
  }
  // 用于存储页码值的数值
  const pagesArray = [];
  // 遍历生成页码值
  for (let i = start; i <= end; i++) {
    // 存储页码值
    pagesArray.push(i);
  }
  // 返回渲染分页组件需要的信息
  return { start, end, pagesArray };
});
</script>
<template>
  <div class="xtx-pagination">
    <a href="javascript:" @click="page--" v-if="page > 1">上一页</a>
    <span v-if="pageInfo.start > 1">...</span>
    <a
      :class="{ active: page == item }"
      href="javascript:"
      @click="page = item"
      v-for="item in pageInfo.pagesArray"
      >{{ item }}</a
    >

    <span v-if="pageInfo.end < pages">...</span>
    <a href="javascript:" @click="page++" v-if="page < pages">下一页</a>
  </div>
</template>

<style scoped lang="less">
.xtx-pagination {
  display: flex;
  justify-content: center;
  padding: 30px;
  > a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    margin-right: 10px;
    &:hover {
      color: @xtxColor;
    }
    &.active {
      background: @xtxColor;
      color: #fff;
      border-color: @xtxColor;
    }
    &.disabled {
      cursor: not-allowed;
      opacity: 0.4;
      &:hover {
        color: #333;
      }
    }
  }
  > span {
    margin-right: 10px;
  }
}
</style>
